.host-software-library-card {
  @include vertical-page-tab-panel-layout;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .button {
      margin: -$pad-medium 0; // Remove verticle width causing description height to be different on Library v. Inventory
    }
  }

  .table-container {
    .stackable-header {
      min-width: initial; // Fix card overflow on low widths
    }

    .children-wrapper {
      display: flex;
      gap: $pad-small;
      align-items: center;
    }
  }

  .table-container__search-input {
    width: 100%;
  }

  @media (min-width: ($break-md)) {
    min-width: 305px; // Custom to fit placeholder text
  }

  .table-container__search {
    width: 100%;
  }

  .table-container__data-table-block {
    .data-table-block {
      .data-table {
        &__wrapper {
          overflow-x: auto;
        }
      }
    }
  }

  &__item-actions {
    display: flex;
    flex-direction: row;
    gap: $pad-medium;
    align-items: center;
  }

  &__item-action {
    min-width: 94px; // Fits the "Reinstall" button without shifting

    .component__tooltip-wrapper {
      margin: 0; // Override 10px vertical margin
    }
  }

  .host-sw-library-table {
    &__software-filter {
      min-width: 240px;
      width: 240px; // Override .form-field 100%
    }

    &__filters {
      display: flex;
      align-items: center;

      .children-wrapper {
        gap: $pad-small;
      }
    }

    .table-container__search-input .input-with-icon {
      min-width: 305px; // Fit placeholder text
    }

    .data-table-block {
      .data-table__table {
        tbody {
          tr {
            .status__cell {
              display: table-cell;
              min-width: 140px; // Fixed width when status changes after clicking install/uninstall

              .component__tooltip-wrapper {
                margin: 0; // Override 10px vertical margin
              }
            }

            .Actions__cell {
              display: flex;

              // Undoes vertical click margin found on table container tooltips
              // TODO: Refactor vertical click margin on component level not table level
              .component__tooltip-wrapper {
                margin: 0; // Override 10px vertical margin
              }
            }
          }
        }
      }

      @media (max-width: ($break-sm - 1)) {
        .data-table__table {
          th,
          td {
            padding-left: $pad-medium;
            padding-right: $pad-medium;
          }
        }
      }
    }
  }
}
